<template>
  <div>
    <h1>父组件</h1>
    <div style="color:red">{{ cMsg }}</div>
    <Child :msg="pMsg" @make="getChildMsg"></Child>
  </div>
</template>
<!-- 
  vue3中父组件向子组件传递数据
  1）在子组件中首先导入defineProps函数
  import {defineProps} from 'vue'
  2) 调用defineProps函数
  interface PropsType{
     msg:string
  }
  defineProps<PropsType>()
  3) 在子组件中直接调用:{{msg}}

  vue3子组件向父组件传值
  1) 在子组件中导入defineEmit
  2) 调用defineEmit
  interface EmitType{
    (e:'自定义事件的名称',传递的数据:类型):void
  }
  const emit=defineEmit<EmitType>()
  3）触发事件调用emit
  emit('自定义事件',传递的数据)
  4) 父组件中，在应用子组件标签中使用@自定义事件的方式来接收
  <子组件 @自定义事件="方法">
  const 方法=(arg)=>{
    
  }
 -->
<script lang='ts' setup>
import Child from './views/Child.vue';
import {ref} from 'vue'
const pMsg=ref<string>("我是父组件的信息")
const cMsg=ref<string>("")
const getChildMsg=(arg:string)=>{
  cMsg.value=arg
}
</script>

<style lang='scss' scoped>
</style>